---
/** @jsxImportSource react */
import Sandpack from './SandpackBase';

let {
  editorHeight = 230,
  previewAspectRatio = 16 / 9,
  stacked,
  reversed,
  ...props
} = Astro.props as Props;

if (typeof editorHeight === 'number') editorHeight = `${editorHeight}px`;
---
<!--
  @TODO This is basically a duplicate of SandpackContainer.astro but uses SandpackBase instead of the more opinionated Sandpack React component.
  If we can parameterize which we use in the astro component (or some other way, hacky or otherwise of pivoting for e.g. react examples vs. web component ones),
  we should refactor back to a single SandpackContainer (CJP)
-->
<style is:global define:vars={{ previewAspectRatio, editorHeight }}>

  .sp-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  @media (min-width: 768px) {
    .sp-container {
      height: var(--editorHeight) !important;
    }
  }

  .sp-container.sp-stacked {
    padding-bottom: calc(1 / var(--previewAspectRatio) * 100% + 50px + var(--editorHeight));
    width: 100%;
    height: 0;
    position: relative;
    overflow: hidden;
  }

  .sp-container.sp-stacked > astro-island {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .sp-resize-handler {
    position: absolute;
    background: var(--theme-bg);
    width: 5px !important;
    left: calc(50% - 5px);
    top: 0;
    bottom: 0;
  }

  .sp-stacked .sp-resize-handler {
    display: none;
  }

  .sp-pre-placeholder {
    margin-top: 0;
    border-radius: 0;
    height: var(--editorHeight) !important;
    background: var(--theme-code-bg) !important;
    color: var(--theme-code-text) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    -webkit-font-smoothing: antialiased;
  }

  .sp-tabs {
    background: var(--theme-code-bg) !important;
    border-bottom: 1px solid var(--sp-colors-surface2, var(--theme-divider));
  }

  .sp-tabs-scrollable-container {
    padding: 0 var(--sp-space-2, 8px);
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 40px;
    margin-bottom: -1px;
  }

  .sp-tab-button {
    padding: 0 var(--sp-space-2, 8px);
    height: var(--sp-layout-headerHeight, 40px);
    white-space: nowrap;
    font-size: 12px !important;
  }

  div:where(.sp-preview-actions) {
    display: none; /* hide until Sandpack JS styles are loaded */
  }

  .sp-wrapper {
    height: 100% !important;
  }

  .sp-layout {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--theme-bg) !important;
    border-radius: 0 !important;
    border: none !important;
    height: 100% !important;
  }

  .sp-stacked .sp-layout {
    flex-direction: column !important;
  }

  .sp-stacked.sp-reversed .sp-layout {
    flex-direction: column-reverse !important;
  }

  .sp-stacked .sp-editor {
    min-width: 100%;
    flex: 0 1 var(--editorHeight) !important;
  }

  .sp-stacked .sp-preview {
    min-width: 100%;
    flex: 1 1 auto;
  }

  .sp-preview {
    --sp-colors-surface1: var(--theme-bg);
    --sp-colors-surface2: var(--theme-bg);
    height: 100% !important;
  }

  .sp-preview-container {
    background: none !important;
  }

  .sp-preview-iframe {
    color-scheme: initial !important;
  }

  .sp-bridge-frame {
    color: var(--theme-code-text) !important;
  }
</style>

<div class={`sp-container${stacked ? ' sp-stacked' : ''}${reversed ? ' sp-reversed' : ''}`}>
  <Sandpack
    client:load
    editorHeight={editorHeight}
    {...props}
  />
</div>

<script>
  // Allow autoplay and fullscreen in Sandpack previews
  const observer = new MutationObserver((mutationList) => {
    const iframe = mutationList[0].target;
    if (!iframe.allow.includes(' autoplay; fullscreen;')) {
      iframe.allow += ' autoplay; fullscreen;';
      iframe.src = iframe.src;
    }
  });
  observer.observe(document, { subtree: true, attributes: true, attributeFilter: ['allow'] });
</script>
